<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-09-15 13:36:35
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:40:10
-->
<template>
  <div>
    <el-dialog title="设置价格" :visible.sync="dialog.setShow" width="50%">
      <vxe-table
        border
        resizable
        show-overflow
        :data="tableData"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        auto-resize
      >
        <vxe-column
          field="minNumber"
          title="最小数量"
          :edit-render="{ name: 'input', attrs: { type: 'number' } }"
        ></vxe-column>
        <vxe-column
          field="maxNumber"
          title="最大数量"
          :edit-render="{ name: 'input', attrs: { type: 'number' } }"
        ></vxe-column>
        <vxe-column
          field="one"
          title="一年"
          :edit-render="{ name: 'input', attrs: { type: 'number' } }"
        ></vxe-column>
        <vxe-column
          field="two"
          title="二年"
          :edit-render="{ name: 'input', attrs: { type: 'number' } }"
        ></vxe-column>
        <vxe-column
          field="three"
          title="三年"
          :edit-render="{ name: 'input', attrs: { type: 'number' } }"
        ></vxe-column>
        <vxe-column
          field="four"
          title="四年"
          :edit-render="{ name: 'input', attrs: { type: 'number' } }"
        ></vxe-column>
      </vxe-table>
      <div class="operation">
        <div>
          <el-button type="primary" size="default" @click="addRows"
            >添加</el-button
          >
        </div>
        <div style="margin-left: 10px">
          <el-button type="primary" size="default" @click="delRows">
            删除
          </el-button>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialog.setShow = false">取消</el-button>
        <el-button type="primary" @click="priceSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  Pricelist,
  updatePricelist,
} from "@/api/qualification/qualificationDeposit.js";
export default {
  filters: {
    Num: function (value) {
      if (value == 1) {
        value = "1-50人";
      } else if (value == 2) {
        value = "51-500人";
      } else {
        value = "500人以上";
      }
      return value;
    },
  },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getPriceData();
  },
  methods: {
    // 添加一行
    addRows() {
      this.tableData.push({
        minNumber: "",
        maxNumber: "",
        one: "",
        two: "",
        three: "",
        four: "",
      });
    },
    // 删除一行
    delRows() {
      this.tableData.pop();
    },
    //   修改价格
    priceSubmit() {
      let that = this;
      let a = 0;
      let b = true;
      this.tableData.forEach((item) => {
        if (item.minNumber === "" || item.maxNumber === "") {
          a++;
        }
      });
      for (var i = 0; i < this.tableData.length; i++) {
        if (i + 1 < this.tableData.length) {
          if (this.tableData[i].maxNumber >= this.tableData[i + 1].minNumber) {
            b = false;
          }
        }
      }
      if (a > 0) return this.$message.info("请输入最小/最大 人数");
      if (!b)
        return this.$message.info(
          "下一条的最小数量不得小于或者等于上一条的最大数量"
        );
      var fd = new FormData();
      fd.append("vips", JSON.stringify(that.tableData));
      fd.append("type", 4);
      updatePricelist(fd).then((res) => {
        that.$message.success(res.msg);
        that.dialog.setShowEject = false;
        that.dialog.setShow = false;
      });
    },
    //   获取价格
    getPriceData() {
      Pricelist({
        type: 4,
      }).then((res) => {
        this.tableData = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.operation {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
</style>